<template>
  <div :class="{'is-mobile': showMobilePage}" class="detail-mengli-order">
    <ipOrderDetail v-if="orderType === '0'" />
    <emojiOrderDetail v-if="orderType === '1'" />
    <commerceOrderDetail v-if="orderType === '2'" />
    <afterSaleDetail v-if="orderType === '3'" />
  </div>
</template>

<script>
import ipOrderDetail from './module/ipOrderDetail';
import emojiOrderDetail from './module/emojiOrderDetail';
import commerceOrderDetail from './module/commerceOrderDetail';
import afterSaleDetail from './module/afterSaleDetail';
import { mapState } from 'vuex';
export default {
  components: { ipOrderDetail, emojiOrderDetail, commerceOrderDetail, afterSaleDetail },
  data() {
    return {
      orderType: '' // 0:商务订单; 2:电商销售; 3:电商售后
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.orderType = String(this.$route.query.type) || '0';
  }
};
</script>

<style lang="scss" scoped>
.detail-mengli-order {
  margin: 16px;
  &.is-mobile {
    margin: 0;
  }
  // &::v-deep {
  //   .select-related-container {
  //     padding: 0;
  //   }
  // }
}
</style>
